<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cate</title>
<link rel="stylesheet" type="text/css" href="../easyui/1.3.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../css/wu.css" />
<link rel="stylesheet" type="text/css" href="../css/icon.css" />
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
<script type="text/javascript" src="../easyui/1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    


    <div id="user-toolbar">
        <div class="wu-toolbar-button">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openUserAdd()" plain="true">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openUserEdit()" plain="true">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeUser()" plain="true">删除</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
        </div>
        <div class="wu-toolbar-search">
            <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
            <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
            <label>用户组：</label> 
            <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                <option value="0">选择用户组</option>
                <option value="1">黄钻</option>
                <option value="2">红钻</option>
                <option value="3">蓝钻</option>
            </select>
            <label>关键词：</label><input class="wu-text" style="width:100px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
        </div>
    </div>

    <table id="user-datagrid"></table>

    <!-- Begin of easyui-dialog -->
    <div id="user-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
    	<form id="user-form" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:20px">
                姓名<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                密码：<input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Password:',required:true">
            </div>
            <div style="margin-bottom:20px">
                
                邮箱：<input class="easyui-textbox" name="mail" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                信息:<input class="easyui-textbox" name="desc" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
            </div>
    	</form>
    </div>
    <input type="text" name="" id="input">
    <div id="user-dialog1" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
        <form id="user-form1" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:20px">
                姓名<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                密码：<input class="easyui-textbox" name="password" style="width:100%" data-options="label:'Password:',required:true">
            </div>
            <div style="margin-bottom:20px">
                
                邮箱：<input class="easyui-textbox" name="mail" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                信息:<input class="easyui-textbox" name="desc" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="change()">change</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearit()">Clear</a>
        </div>
    </div>
    <!-- End of easyui-dialog -->
    <script type="text/javascript">
    	$('#user-datagrid').datagrid({
        url:'http://localhost:3000/users/list',
        fit:true,
        pageSize:2,
        pageList:[2,4,6,8,10],
        pagination:true,
        toolbar:'#user-toolbar',
        columns:[[
        	{ checkbox:true},
            {field:'name',title:'Name'},
            {field:'password',title:'Password'},
            {field:'mail',title:'Email'},
            {field:'desc',title:'Message'},

            {field:'operate',title:'管理',
    			formatter: function(value,row,index){
    				return '<a href="javascript:;void(0)"  class="easyui-linkbutton" onclick="editUser(\''+ row._id+'\')">修改</a> '+
    				'<a href="javascript:;void(0)" class="easyui-linkbutton" onclick="deleUser(\''+ row._id+'\')">删除</a>'
    			}
    		}
        ]]
    });

    function openUserAdd(){
    	$('#user-form').form('clear');
    	$("#user-dialog").dialog({
			closed: false,
			modal:true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: userAddAction
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');                    
                }
            }]
        });
    }


    function userAddAction(){
    	 $('#user-form').form('submit',{
            onSubmit:function(){
                if ($(this).form('enableValidation').form('validate')){
    				$.ajax({
    					type:"post",
    					url:"http://localhost:3000/users/data",
    					data:$("#user-form").serializeJSON()
    				}).then(function(res){
    					console.log(res)
    				});
                }else{
                	alert('no')
                }
            }
        });
         $('#user-datagrid').datagrid('reload');
         $('#user-dialog').dialog('close');
    }

    function editUser(id) {
            $('#user-dialog1').dialog('open');
            //alert(id)
            $.ajax({
                type: "post",
                url: "http://localhost:3000/users/data/" + id
            }).then(function(res) {
                $('#input').val(res._id);
                //console.log($('#input').val())
                $('#user-form1').form('load', res);
            })
        };

        function change() {
            $('#user-form1').form('submit', {
                onSubmit: function(res) {
                    if ($(this).form('enableValidation').form('validate')) {
                        $.ajax({
                            type: "post",
                            url: "http://localhost:3000/users/data/" + $('#input').val(),
                            data: $("#user-form1").serializeJSON()
                        }).then(function(res) {
                            //console.log(res)
                            $('#user-dialog1').dialog('close');
                            $('#user-datagrid').datagrid('reload');
                        });
                        $('#user-dialog1').dialog('close');
                        $('#user-datagrid').datagrid('reload');
                    } else {
                        $.messager.show({
                            title: '提示！',
                            msg: '验证失败！',
                            showType: 'show'
                        });
                    }
                }
            });
        }

    function deleUser(id){
    	$.ajax({
    		type:"delete",
    		url:"http://localhost:3000/users/data/"+ id
    	}).then(function(res){		
    		$('#user-datagrid').datagrid('reload');
    	});
    }

    function reload(){
        location.reload();
    }





    </script>

</body>
</html>